<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>9.9包邮</title><link rel="stylesheet" href="https://at.alicdn.com/t/font_1534407_edyx096nc5c.css"><link rel="stylesheet" href="https://cdn.staticfile.org/layer/2.3/skin/layer.css"><script>;(function (win, lib) {
  var doc = win.document;
  var docEl = doc.documentElement;
  var metaEl = doc.querySelector("meta[name=\"viewport\"]");
  var flexibleEl = doc.querySelector("meta[name=\"flexible\"]");
  var dpr = 0;
  var scale = 0;
  var tid;
  var flexible = lib.flexible || (lib.flexible = {});
  if (metaEl) {
    // console.warn('将根据已有的meta标签来设置缩放比例')
    var match = metaEl.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
    if (match) {
      scale = parseFloat(match[1]);
      dpr = parseInt(1 / scale);
    }
  } else if (flexibleEl) {
    var content = flexibleEl.getAttribute("content");
    if (content) {
      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
      if (initialDpr) {
        dpr = parseFloat(initialDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));
      }
      if (maximumDpr) {
        dpr = parseFloat(maximumDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));
      }
    }
  }
  if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
        dpr = 3;
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
        dpr = 2;
      } else {
        dpr = 1;
      }
    } else {
      // 其他设备下，仍旧使用1倍的方案
      dpr = 1;
    }
    scale = 1 / dpr;
  }
  docEl.setAttribute("data-dpr", dpr);
  if (!metaEl) {
    metaEl = doc.createElement("meta");
    metaEl.setAttribute("name", "viewport");
    metaEl.setAttribute(
      "content",
      "initial-scale=" +
      scale +
      ", maximum-scale=" +
      scale +
      ", minimum-scale=" +
      scale +
      ", user-scalable=no"
    );
    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(metaEl);
    } else {
      var wrap = doc.createElement("div");
      wrap.appendChild(metaEl);
      doc.write(wrap.innerHTML);
    }
  }

  function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
      width = 540 * dpr;
    }
    var rem = width * 0.133334;
    docEl.style.fontSize = rem + "px";
    flexible.rem = win.rem = rem;
  }

  win.addEventListener(
    "resize",
    function () {
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    },
    false
  );
  win.addEventListener(
    "pageshow",
    function (e) {
      if (e.persisted) {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
      }
    },
    false
  );
  if (doc.readyState === "compvare") {
    doc.body.style.fontSize = 12 * dpr + "px";
  } else {
    doc.addEventListener(
      "DOMContentLoaded",
      function (e) {
        doc.body.style.fontSize = 12 * dpr + "px";
      },
      false
    );
  }
  refreshRem();
  flexible.dpr = win.dpr = dpr;
  flexible.refreshRem = refreshRem;
  flexible.rem2px = function (d) {
    var val = parseFloat(d) * this.rem;
    if (typeof d === "string" && d.match(/rem$/)) {
      val += "px";
    }
    return val;
  };
  flexible.px2rem = function (d) {
    var val = parseFloat(d) / this.rem;
    if (typeof d === "string" && d.match(/px$/)) {
      val += "rem";
    }
    return val;
  };
})(window, window["lib"] || (window["lib"] = {}));
</script><script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script><script src="https://cdn.staticfile.org/vue-lazyload/1.3.3/vue-lazyload.js"></script><script src="https://cdn.staticfile.org/layer/2.3/layer.js"></script><script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script><script>var vmUrlSearchs = null;

function vmRequest(name) {
  if (!vmUrlSearchs) {
    vmUrlSearchs = new vmUrlSearch();
  }
  return vmUrlSearchs[name];
}

function vmUrlSearch() {
  var name, value;
  var str = location.href;
  var num = str.indexOf("?");
  str = str.substr(num + 1);
  var arr = str.split("&");
  for (var i = 0; i < arr.length; i++) {
    num = arr[i].indexOf("=");
    if (num > 0) {
      name = arr[i].substring(0, num);
      value = arr[i].substr(num + 1);
      this[name] = value;
    }
  }
}

/**
 * 判断是否已滚动到底部
 * @param el {HTMLElement}
 * @param direct {"vertical"|"horizontal"?}
 * @param offset {number?}
 * @returns {boolean}
 */
function isScrollEnd(el, direct, offset) {
  if (direct === void 0) {
    direct = "vertical";
  }
  if (offset === void 0) {
    offset = 10;
  }
  var scrollTop = el.scrollTop;
  var scrollLeft = el.scrollLeft;
  var scrollHeight = el.scrollHeight;
  var scrollWidth = el.scrollWidth;
  var width = el.clientWidth;
  var height = el.clientHeight;
  if (el === window) {
    scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    scrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth;
    width = document.documentElement.clientWidth || document.body.clientWidth;
    height = document.documentElement.clientHeight || document.body.clientHeight;
  }
  if (direct === "vertical") {
    return scrollTop >= scrollHeight - height - offset;
  } else {
    return scrollLeft >= scrollWidth - width - offset;
  }
}

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: "http://img.bc.haodanku.com/haodanku/1595237918",
  loading: "http://img.bc.fqapps.com/fudai13cae4ae6ef16739ed3b100a2ec39e97.gif",
  attempt: 1
});

/**
 * 复制文字
 * @param text {string}
 * @param successMsg {string?}
 */
function copyText(text, successMsg) {
  var handleCopy = function (e) {
    e.clipboardData.setData("text/plain", text);
    e.preventDefault();
    document.removeEventListener("copy", handleCopy);
    layer.msg(successMsg || "复制成功!", {
      time: 2000,
      shade: 0.1,
      zIndex: 19891022000,
      shadeClose: true
    });
  };
  document.addEventListener("copy", handleCopy);
  document.execCommand("copy");
}
</script></head><body><!--link(rel="stylesheet" src="gaoyong.css")--><style>ul{list-style:none}*{-webkit-tap-highlight-color:transparent;padding:0}body,html{background:#9101a6;padding:0;margin:0}[v-cloak]{display:none}.mainnav{z-index:99}.mainnav,.mainnav>.mainnav-content{position:relative;width:100%;height:.74rem;display:flex}.mainnav>.mainnav-content{overflow:hidden}.mainnav .partnav{height:.74rem;position:relative;overflow:hidden;flex:1;background:#fff;color:#333}.mainnav .partnavlist{position:absolute;left:0;-webkit-overflow-scrolling:touch;background:#fff}.mainnav .partnavlist ul{position:relative;white-space:nowrap;font-size:0}.mainnav .partnavlist ul li{padding:0 .15rem;height:.74rem;line-height:.76rem;position:relative;display:inline-block;color:#333;font-size:.26rem;text-align:center;text-decoration:none;cursor:pointer;background:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mainnav .partnavlist ul li:first-child:before{content:normal}.mainnav .partnavlist ul li.active{font-weight:500;color:#9101a6}.mainnav .partnavlist ul li.active i{display:inline-block;width:.22rem;transform:translateY(.04rem)}.mainnav .partnavlist ul li.active i svg .st0{fill-rule:evenodd;clip-rule:evenodd;fill:currentColor}.mainnav .partnavlist ul li.active i svg .st1{fill:currentColor}.mainnav .partnavlist.goods-nav-list ul li{width:1.28rem}.mainnav .morenav{position:relative;width:.8rem;height:.74rem;display:flex;justify-content:center;align-items:center;cursor:pointer;background:#fff}.mainnav .morenav i{font-size:.26rem;color:#333}.mainnav .opennav{position:absolute;top:.74rem;left:0;width:100%;background:#fff}.mainnav .opennav ul{display:flex;flex-wrap:wrap;justify-content:space-around;box-shadow:0 8px 14px -7px rgba(0,0,0,.1);padding:.05rem .15rem;border-top:.0133rem solid #f5f5f5}.mainnav .opennav ul li{font-size:.22rem;letter-spacing:.02rem;text-align:center;display:flex;align-items:center;justify-content:center;border-radius:.08rem;width:1.64rem;height:.54rem;padding:.09rem 0;margin:.15rem .08rem;background:#f5f5f5;color:#666;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mainnav .opennav ul li.active{color:#fff;background:#5a4af4}.mainnav .opennav ul li.active img{width:.2667rem}.mainnav-fixed{position:fixed;top:0;left:0;width:100%;border-radius:0;z-index:199;height:.74rem;background:#fff}.mainnav-fixed .mainnav{width:100%;margin:0 auto}.mainnav-fixed .opennav ul{justify-content:normal}.goods-card{width:7.02rem;background:#fff;display:flex;align-items:center;padding:.2rem;margin-bottom:.2rem;border-radius:.2rem;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.goods-card>img{width:2.3rem;height:2.3rem;border-radius:.1rem;filter:contrast(97%)}.goods-card .detail{position:relative;width:calc(100% - 2.3rem);padding-left:.2rem;box-sizing:border-box}.goods-card .detail .ticket{display:inline-flex;align-items:center;height:.38rem;padding:1px 1px 1px 0;box-sizing:border-box;background:linear-gradient(0deg,#ff753c,#ff4b42);border-radius:2px;font-size:0;font-family:Microsoft YaHei}.goods-card .detail .ticket .name,.goods-card .detail .ticket .value{padding:0 .05rem;font-size:.25rem;font-family:Microsoft YaHei}.goods-card .detail .ticket .name{line-height:1em;font-weight:300;color:#fff}.goods-card .detail .ticket .value{display:flex;align-items:center;height:100%;font-weight:400;color:#ff4d42;background:#fff}.goods-card .detail .price{font-size:.24rem;font-family:PingFang SC;font-weight:700;line-height:1em}.goods-card .detail .price.has-share{padding-right:.5rem}.goods-card .detail .price .discount{color:#f23015;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.goods-card .detail .price .discount strong{font-size:.44rem;line-height:1em}.goods-card .detail .price .price-bottom{margin-top:.1rem}.goods-card .detail .price .price-bottom>div{display:inline-block;vertical-align:top}.goods-card .detail .price .price-bottom .origin{font-weight:500;text-decoration:line-through;color:#b9b9b9}.goods-card .detail .price .price-bottom .sales{float:right;color:#a09f9f}.goods-card .detail .price .price-bottom .sales .name{margin-right:2px}.goods-card .detail .icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:.3rem;width:auto;margin-right:2px}.goods-card .detail .title{display:flex;align-items:center;font-size:.3rem;font-weight:500;color:#000;margin:0}.goods-card .detail .title span{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.goods-card .detail .tm-icons+div{margin-top:0}.goods-card .detail .center{margin:.2rem 0}.goods-card .detail .share{position:absolute;top:.8rem;right:-.2rem;width:1.03rem;font-size:.26rem;font-weight:500;padding-left:.1rem;border-radius:.28rem 0 0 .28rem;cursor:pointer;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1;height:.56rem;color:#f23015;background:#ffefed;display:flex;justify-content:center;align-items:center}.goods-card .detail .footer{display:flex;justify-content:space-between;align-items:flex-end}.goods-card .detail .footer .operation{width:1.87rem;height:.64rem;font-size:.28rem;font-weight:700;color:#bd1d14;background:linear-gradient(0deg,#ffcd62,#fde989);display:flex;justify-content:center;align-items:center;border-radius:.36rem;cursor:pointer}.goods-card .detail .footer .operation.sell-out{background:#eee;color:#ccc;cursor:default}.goods-card-loading{text-align:center;padding:.4rem 0;color:#fff}.goods-card-loading span{font-size:.24rem;color:currentColor;letter-spacing:.01rem}.free-share{position:fixed;bottom:0;width:7.5rem;height:1.76rem;background:linear-gradient(180deg,transparent,#9101a6 50%);padding:.32rem .24rem;box-sizing:border-box;z-index:100;cursor:pointer}.free-share #share_href{display:flex;align-items:center;justify-content:center;width:6.22rem;height:.9rem;margin:auto;background:linear-gradient(180deg,#fff8e6,#fdeabf);border-radius:.45rem;text-align:center;color:#9101a6;font-size:.324rem;line-height:1em}.free-share #share_href #svg-icon{margin-top:.05rem;margin-right:.1rem;height:1em}.free-share #share_href #svg-icon .cls-1,.free-share #share_href #svg-icon .cls-2{fill:none;stroke:currentColor;stroke-linejoin:round;stroke-width:2px}.free-share #share_href #svg-icon .cls-2{stroke-linecap:round}.free-loading{display:flex;justify-content:center;align-items:center;flex-direction:column;padding-top:.6rem}.free-loading>p{font-size:.3rem;color:#fff;letter-spacing:.01rem;margin:.2rem 0 0}.free-loading .la-line-scale{width:1.6rem;height:1.28rem;display:block;font-size:0;color:#9101a6}.free-loading .la-line-scale>div{display:inline-block;float:none;background-color:currentColor;border:0 solid;width:.16rem;height:1.28rem;margin:0 .08rem;border-radius:0;-webkit-animation:line-scale 1.2s ease infinite;animation:line-scale 1.2s ease infinite}.free-loading .la-line-scale>div:first-child{-webkit-animation-delay:-1.2s;animation-delay:-1.2s}.free-loading .la-line-scale>div:nth-child(2){-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.free-loading .la-line-scale>div:nth-child(3){-webkit-animation-delay:-1s;animation-delay:-1s}.free-loading .la-line-scale>div:nth-child(4){-webkit-animation-delay:-.9s;animation-delay:-.9s}.free-loading .la-line-scale>div:nth-child(5){-webkit-animation-delay:-.8s;animation-delay:-.8s}.free-container{min-height:100vh;max-width:7.5rem;background:#9101a6;padding-bottom:1.76rem;margin:0 auto;box-sizing:border-box}.free-banner{width:7.5rem;height:auto;display:block}.free-lists{width:7.02rem;margin:.28rem auto 0;box-sizing:border-box;border-radius:0 0 .23rem .23rem}@-webkit-keyframes turn{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes turn{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@-webkit-keyframes line-scale{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}@keyframes line-scale{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}.rule{position:relative;display:block;width:7.02rem;height:2.61rem;padding:.75rem .1rem .1rem .28rem;box-sizing:border-box;margin:-.5rem auto 0;background:url(http://img-haodanku-com.cdn.fudaiapp.com/FigJSqLrLoDa8hvdpIcEjKncfZzX);background-size:cover}.rule .rule-box{height:100%;overflow:auto}.rule p{margin:0;font-size:.22rem;font-family:PingFang SC;font-weight:500;line-height:.4rem;color:#333}.free-navbar{position:-webkit-sticky;position:sticky;z-index:100;top:0;background:#9101a6;padding:.4rem 0 .28rem}.free-navbar .free-navbar-class{position:relative;display:flex;align-items:center;height:.88rem;width:7.02rem;margin:0 auto;border:1px solid #ce8e9e;border-radius:.44rem;box-sizing:border-box;overflow:hidden;background:#700380;font-size:0;box-shadow:inset 0 0 6px 0 rgba(0,0,0,.4)}.free-navbar .free-navbar-class span{flex:1;display:flex;align-items:center;height:100%;position:relative;z-index:1;font-size:.36rem;font-weight:700;color:#ffdea9;justify-content:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center}.free-navbar .free-navbar-class span.active-bg{position:absolute;z-index:0;top:-1px;left:0;height:.88rem;background:#06f;transition:left .2s ease-out;background:linear-gradient(90deg,#ffdda8,#fff6e2);border-radius:.44rem}.free-navbar .free-navbar-class span.active{color:#bd1d14}.free-navbar .free-navbar-tips{font-size:.24rem;font-weight:400;color:#ebaf51;text-align:center;margin:.24rem 0 .28rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.free-lists{margin-top:0}.free-loading .la-line-scale{color:#fff}</style><template id="c-list-item">
  <div class="goods-card">
    <img v-lazy="item.itempic" v-if="item.itempic">
    <img src="http://img.bc.fqapps.com/fudai13cae4ae6ef16739ed3b100a2ec39e97.gif" alt="" v-else>
    <div class="detail">
      <div class="title">
        <template v-if="'jd' !== type">
          <img
            v-if="item.shoptype === 'B'"
            class="icon tm"
            src="http://img-haodanku-com.cdn.fudaiapp.com/FvU9Lg74-WgBzWQphv98-9KgYF6d"
            alt="">
          <img
            v-else-if="item.shoptype === 'C'"
            class="icon tb"
            src="http://img-haodanku-com.cdn.fudaiapp.com/FnCy1eY4W5khYdTw_iIDhKuwGLmu"
            alt="">
        </template>
        <img
          v-else
          class="icon"
          src="http://img-haodanku-com.cdn.fudaiapp.com/FieNXmZjc_io1YMTcsCbrxsQJBR0"
          alt="">
       <!-- <img
          v-else-if="'tm' === type"
          class="icon"
          src="http://img-haodanku-com.cdn.fudaiapp.com/FtThlDILaSzwEIAIvFYK3iIDJv4-"
          alt="">-->
        <span>{{ item.itemtitle }}</span>
      </div>
      <div class="tm-icons" v-if="false">
        <img
          v-if="item.shoptype === 'B'"
          class="icon tm"
          src="http://img-haodanku-com.cdn.fudaiapp.com/FvU9Lg74-WgBzWQphv98-9KgYF6d"
          alt="">
        <img
          v-else-if="item.shoptype === 'C'"
          class="icon tb"
          src="http://img-haodanku-com.cdn.fudaiapp.com/FnCy1eY4W5khYdTw_iIDhKuwGLmu"
          alt="">
      </div>
      <div class="center">
        <div class="price" v-bind:class="{'has-share': showShare}">
          <div class="discount">{{type !== "jd" ? "券后" : "礼金"}}价：<strong>{{ Number(item.itemendprice) }}元</strong></div>
          <div class="price-bottom">
            <div class="origin">原价：{{ item.itemprice }}元</div>
            <div class="sales" v-show="!showShare"><span class="name">月销</span><span
              class="value">{{item.itemsale}}</span></div>
          </div>
        </div>
        <span v-if="showShare" class="share" v-bind:id="'item' + item.sku"
              v-on:click="share(item)">分享</span>
      </div>
      <div class="footer">
        <div class="ticket">
          <span class="name">券</span><span
          class="value">￥{{ type !== "jd" ?  item.couponmoney : item.coupon_amount }}</span>
        </div>
        <span v-if="item.stock == 0" class="operation sell-out">已抢完</span>
        <span v-else-if="item.stock == -1" class="operation sell-out">未开始</span>
        <span v-else class="operation" v-on:click="buy(item)">立即购买</span>
      </div>
    </div>
  </div>
</template>
<script>
Vue.component("list-item", {
  template: "#c-list-item",
  props: {
    item: Object,
    type: {
      type: String,
      default: "tb" // tb || jd
    },
    showShare: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    share: function (item) {
      this.$emit("share", item);
    },
    buy: function (item) {
      this.$emit("buy", item);
    }
  }
});
</script>
<template id="c-loading">
  <!-- 加载效果 -->
  <div class="free-loading">
    <div class="la-line-scale">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <p>数据加载中...</p>
  </div>
</template>
<script>
Vue.component("loading", {
  template: "#c-loading"
});
</script>
<template id="scroll-nav">
  <div v-bind:class="{'mainnav-fixed': mainnavFixed}" v-on:click.stop>
    <div class="mainnav" ref="mainnav">
      <div class="mainnav-content">
        <div class="partnav" ref="partnav">
          <div class="partnavlist" ref="partnavlist" v-on:touchstart.stop='toushStart'
               v-on:touchmove.stop='touMove'>
            <ul v-bind:class="{open: opennavList}">
              <li
                ref="ranklistli"
                v-for="(item, index) in list"
                v-on:click="onclickcategoryNav(item,index)"
                v-bind:class="{ 'active': activeValue === item[valueKey] }"
              >
                <i v-if="activeValue === item[valueKey]">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
                       id="组_5739" x="0px" y="0px" viewBox="0 0 20 26" style="enable-background:new 0 0 20 26;"
                       xml:space="preserve">
                    <path class="st0"
                          d="M10,0C4.5,0,0,4.5,0,10c0,5.5,8.2,16,10,16s10-10.5,10-16C20,4.5,15.5,0,10,0z M10,16c-3.3,0-6-2.7-6-6  s2.7-6,6-6s6,2.7,6,6S13.3,16,10,16z"/>
                    <circle id="椭圆_666_拷贝" class="st1" cx="10" cy="10" r="3"/>
                  </svg>
                </i>
                <span>{{item[labelKey]}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="morenav" v-on:click="openList()" ref="morenavElement"
             v-bind:style="opennavList ? 'border-left: 1px solid #f5f5f5;' : 'box-shadow: 0px 0px 12px #ccc;'">
          <i class="iconfont hdk-paixu2" v-if="!opennavList"></i>
          <i class="iconfont hdk-paixu" v-if="opennavList"></i>
        </div>
      </div>
      <div class="opennav" v-if="opennavList">
        <ul>
          <li
            ref="navlistli"
            v-for="(item,index) in list"
            v-bind:class="{active:activeValue === item[valueKey]}"
            v-on:click="onclickcategoryNav(item,index)"
          >
            {{item[labelKey]}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
Vue.component("scroll-nav", {
  template: "#scroll-nav",
  props: {
    list: {
      type: Array,
      required: true
    },
    value: {
      type: [String, Number],
      required: true
    },
    valueKey: {
      type: String,
      default: "value"
    },
    labelKey: {
      type: String,
      default: "label"
    }
  },
  data: function () {
    return {
      mainnavFixed: false,
      opennavList: false,
      activeValue: ""
    };
  },
  mounted: function () {
    this.activeValue = this.value;
    var self = this;
    window.addEventListener("click", function () {
      self.opennavList = false;
    });
    setTimeout(function () {
      var distanceTop = self.$refs.mainnav.getBoundingClientRect().top;
      var mainnavHeight = self.$refs.mainnav.getBoundingClientRect().height;
      window.addEventListener("scroll", function () { //下拉加载
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        // 当滑动距离大于等于分类距离顶部位置时，则固定定位
        if (scrollTop >= distanceTop) {
          self.mainnavFixed = true;
          self.shopdetailsTop = mainnavHeight;
          $(".header-addSearch").css("display", "none");
        } else {
          self.mainnavFixed = false;
          self.shopdetailsTop = 0;
          $(".header-addSearch").css("display", "block");
        }
      });
    }, 100);
  },
  watch: {
    value: function (n) {
      this.activeValue = n;
    }
  },
  methods: {
    onclickcategoryNav: function (item, index) {
      if (item[this.valueKey] === this.activeValue) return;
      document.body.scrollTop > $(".header").height() && (document.body.scrollTop = $(".header").height());
      document.documentElement.scrollTop > $(".header").height() && (document.documentElement.scrollTop = $(".header").height());
      this.activeValue = item[this.valueKey];
      this.$emit("update:value", this.activeValue);
      this.$emit("change", this.activeValue);
      // 整条分类的宽度
      var mainnav_w = this.$refs.mainnav.offsetWidth;
      // 获取单个元素宽度
      var navli_w = this.$refs.ranklistli[index].offsetWidth;
      // 居中的元素距离左右两边的宽度
      var nav_distance = (mainnav_w - navli_w) / 2;
      // 被点击元素距离左边的距离
      var navli_left = parseInt(this.$refs.ranklistli[index].offsetLeft);
      var part_nav_width = this.$refs.partnav.offsetWidth;
      var part_nav_list_width = this.$refs.partnavlist.offsetWidth;
      var nav_offsetLeft = "";
      if (navli_left <= nav_distance) {
        nav_offsetLeft = 0;
      } else if (nav_distance - navli_left <= part_nav_width - part_nav_list_width) {
        nav_offsetLeft = part_nav_width - part_nav_list_width;
      } else {
        nav_offsetLeft = nav_distance - navli_left;
      }
      $(".partnavlist").animate({
        "left": nav_offsetLeft
      }, 300);
      if (this.opennavList) {
        this.opennavList = false;
      }
    },
    /**
     * 滑动开始
     */
    toushStart: function (e) {
      x1 = e.targetTouches[0].pageX;
      y1 = e.targetTouches[0].pageY;
      part_nav_list_left = this.$refs.partnavlist.offsetLeft;
    },
    /**
     * 滑动结束
     */
    touMove: function (e) {
      var x2 = e.targetTouches[0].pageX;
      var y2 = e.targetTouches[0].pageY;
      var part_nav_width = this.$refs.partnav.offsetWidth;
      var part_nav_list_width = this.$refs.partnavlist.offsetWidth;
      if (part_nav_list_left + x2 - x1 >= 0) {
        $(".partnavlist").css("left", 0);
      } else if (part_nav_list_left + x2 - x1 <= part_nav_width - part_nav_list_width) {
        $(".partnavlist").css("left", part_nav_width - part_nav_list_width);
      } else {
        $(".partnavlist").css("left", part_nav_list_left + x2 - x1);
      }
      if (Math.abs(y2 - y1) > 0) {
        e.preventDefault();
      }
    },
    /**
     * 展开所有分类
     */
    openList: function () {
      this.opennavList = !this.opennavList;
    },
  }
});
</script>
<!--<template id="c-share">
  <div class="free-share">
    <div id="share_href" v-on:click="handleShare">
      <i>
        <svg xmlns="http://www.w3.org/2000/svg" id="svg-icon" data-name="图层 1" viewBox="0 0 18 19.11">
          <title>分享</title>
          <path class="cls-1" d="M17.5,8A2.5,2.5,0,1,0,15,5.5,2.5,2.5,0,0,0,17.5,8Z" transform="translate(-3 -2)"/>
          <path class="cls-1" d="M6.5,14.5A2.5,2.5,0,1,0,4,12,2.5,2.5,0,0,0,6.5,14.5Z" transform="translate(-3 -2)"/>
          <path class="cls-2" d="M15,6.79,8.67,10.62" transform="translate(-3 -2)"/>
          <path class="cls-2" d="M8.67,13.28,13.27,16" transform="translate(-3 -2)"/>
          <path class="cls-1" d="M15.77,15.11a2.5,2.5,0,1,1-2.5,2.5A2.5,2.5,0,0,1,15.77,15.11Z"
                transform="translate(-3 -2)"/>
        </svg>
      </i>
      <span>分享好友</span>
    </div>
  </div>
</template>-->
<script>
Vue.component("share", {
  template: "#c-share",
  methods: {
    handleShare: function () {
      this.$emit("share");
    }
  }
});
</script>
<div class="free-container" id="free_app" v-cloak><div class="free-mail"><img class="free-banner" v-bind:src="banner" alt=""><div class="free-navbar"><div class="free-navbar-class"><span class="active-bg" v-bind:style="{left:(switchData.activeIndex / switchData.list.length * 100) + '%',width:(100/switchData.list.length)+'%'}"></span><span v-for="(item, index) in switchData.list" v-bind:class="{'active': item.value == switchData.selected}" v-on:click="handleNavbar(item, index)">{{ item.name }}</span></div></div><div class="free-lists"><template v-if="listData.list.length || listData.finished"><list-item class="free-item" v-for="(item,index) in listData.list" v-bind:item="item" v-bind::key="index" v-on:buy="handleGoodsTransfer"></list-item><!-- 底部提示 --><div class="goods-card-loading"><span v-if="listData.finished">已经加载到底啦~</span><span v-else>数据正在赶来的路上...</span></div></template><!-- 加载效果 --><loading v-else-if="!listData.list.length &amp;&amp; listData.loading"></loading></div></div><share v-on:share="handleShare"></share></div><script>var mixins9_9 = {
  el: "#free_app",
  data: function (){
    return {
      vmCid: vmRequest("cid"),
      hostLink: window.location,
      vmHttp: (function () {
        var protocol = window.location.protocol;
        protocol = protocol.substring(0, protocol.length - 1);
        return protocol.includes("http") ? protocol : "http";
      })(),
      switchData: {
        list: [
          {
            name: "9元专区",
            value: 2
          },
          {
            name: "6元专区",
            value: 3
          },
          {
            name: "3元专区",
            value: 4
          }
        ],
        selected: 2,
        activeIndex: 0
      },
      oBasic: {
        page: 1,
        page_total: 1,
        share_href: ""
      },
      listData: {
        list: [],
        loading: false,
        finished: false,
        min_id: 1
      },
      rules: [],
      banner: "http://img-haodanku-com.cdn.fudaiapp.com/FtGOXtB2bib_pV3CQidX1x_mRBwi",
    }
  },
  created: function () {
    this.oBasic.share_href = this.hostLink.href;
    this.getListData();
  },
  mounted: function () {
    var that = this;
    window.addEventListener("scroll", function (ev) {
      if (isScrollEnd(this, "vertical", 40)) {
        that.getListData();
      }
    });
  },
  computed: {
    configUrl: function () {
      return this.vmHttp + "://api.haodanku.com/jdactivity/ActivitySetting";
    }
  },
  methods: {
    resetListData: function () {
      this.listData = {
        list: [],
        loading: false,
        finished: false,
        min_id: 1
      };
    },
    /**
     * 切换导航栏
     */
    handleNavbar: function (item, index) {
      if (this.listData.loading || this.switchData.activeIndex === index) return;
      this.switchData.activeIndex = index;
      this.switchData.selected = item.value;
      this.resetListData();
      this.getListData();
    },
    /**
     * 分享给好友
     */
    handleShare: function () {
      var that = this;
      var clipboard = new ClipboardJS("#share_href", {
        text: function () {
          return "" + that.oBasic.share_href;
        }
      });
      clipboard.on("success", function (e) {
        layer.msg("复制成功，分享给身边好友吧~", {
          time: 1200,
          shift: 5
        });
      });
      clipboard.on("error", function (e) {
        layer.msg("复制失败，请稍后重试", {
          time: 1200,
          shift: 5
        });
      });
    },
  }
};

</script><script>new Vue({
  mixins: [mixins9_9],
  methods: {
    /**
     * 获取商品数据
     */
    getListData: function () {
      if (this.listData.loading || this.listData.finished) return;
      var that = this;
      that.listData.loading = true;
      $.ajax({
        url: this.vmHttp + "://v2.api.haodanku.com/low_price_Pinkage_data",
        type: "GET",
        data: {
          apikey: "shunziyouxuan",
          type: this.switchData.selected,
          min_id: this.listData.min_id
        },
        dataType: "json"
      }).done(function (res) {
        if (Number(res.code) !== 1) return;
        that.listData.min_id = res.min_id;
        setTimeout(function () {
          that.listData.list = that.listData.list.concat(res.data);
          that.listData.loading = false;
          that.listData.finished = !Boolean(res.data && res.data.length);
        }, 200);
      });
    },
    /**
     * 商品转链
     */
    handleGoodsTransfer: function (item, source) {
      if (item.stock == 0) {
        layer.msg("已抢完", {
          time: 1200,
          shift: 5
        });
        return;
      } else if (item.stock == -1) {
        layer.msg("活动未开始", {
          time: 1200,
          shift: 5
        });
        return;
      }
      var that = this;
      $.ajax({
        url: that.vmHttp + "://v2.api.haodanku.com/ratesurl",
        type: "POST",
        data: {
          apikey: "shunziyouxuan",  //必填
          pid: "mm_97788430_30616603_108414450395",  //必填
          tb_name: "高财顺",  //必填
          itemid: item.itemid,
          title: item.itemshorttitle,
          get_taoword: 1,
        },
        dataType: "json",
        async: true
      }).done(function (res) {
        if (res.code == 1) {
          copyText(res.data.taoword, "复制淘口令成功，请打开淘宝领取");
        } else {
          layer.msg(res.msg, {
            time: 4000,
            shift: 5
          });
        }
      });
    },
  }
})</script></body></html>